<template>
  <a-card class="display-now-card" title="最新温度数据">
    <template #extra>
      <ServiceTag />
    </template>
    <div v-if="tempData">
      <div class="flex items-center justify-between">
        <div class="flex flex-col items-center justify-center h-32 ml-8">
          <h3 class="mr-3 text-2xl">{{ tempData.device_name }}</h3>
          <div class="text-xl">
            <IconFont type="icon-temperature" style="font-size: 2rem" />
            <span class="font-mono">{{ tempData.temp }}℃</span>
          </div>
        </div>

        <div>
          <h4 class="flex items-center justify-center text-lg">
            地理位置
            <div class="flex items-center justify-center text-red-500">
              <RadarChartOutlined />
            </div>
          </h4>
          <div class="flex flex-wrap justify-center gap-2">
            <a-tag color="#87d068">经度：{{ tempData.lng }}</a-tag>
            <a-tag color="#108ee9">维度：{{ tempData.lat }}</a-tag>
          </div>
        </div>
      </div>

      <div class="flex justify-end">
        <a-tag>ID: {{ tempData.id }}</a-tag>
      </div>

      <div class="flex justify-end pr-2 mt-2 font-mono">
        <span>设备数据时间：</span>
        {{ tempData.time2 }}
      </div>
    </div>
    <div
      v-else
      class="flex items-center justify-center bg-gray-200"
      style="height: 500px"
    >
      <a-spin />
    </div>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, ref } from "vue";
import ServiceTag from "@/components/tags/ServiceTag.vue";
import { getDisplayNow } from "@/controller/Display";
import { TempDevice } from "model";
import IconFont from "@/components/Icons";
import { RadarChartOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "DisplayNowCard",
  components: {
    ServiceTag,
    IconFont,
    RadarChartOutlined,
  },
  setup() {
    const tempData = ref<TempDevice>();
    onBeforeMount(async () => {
      tempData.value = await getDisplayNow();
      tempData.value.time2 = new Date(tempData.value.time).toLocaleString();
    });
    return { tempData };
  },
});
</script>

<style scoped lang="scss"></style>
